﻿/// <reference path="references.scss" />


// Add nested dropdown support to Bootstrap
// ==============================================================

.dropdown-group {
	position: relative;

	> .dropdown-item {
		position: relative;
		padding-inline-end: 2rem;

		&:before {
			// make caret
			position: absolute;
			inset-inline-end: $dropdown-item-padding-x / 2;
			top: 50%;
			transform: translateY(-40%);
            color: $gray-500;
			@include fontawesome("\f054", 10px); // chevron-right

            [dir=rtl] & {
                // RTL: Swap the icon direction
                content: '\f053';
            }
		}
	}

	&:hover > .dropdown-item {
		color: $dropdown-link-hover-color;
		background-color: $dropdown-link-hover-bg;
	}

	.dropdown-menu {
        // Is popperized now (04.01.2024)
		position: absolute;
		margin-top: 0 !important;
        inset-inline-start: initial;
	}
}


// Dropdown toggle
// ==============================================================

.dropdown-toggle:after {
	// better centering
	vertical-align: 0.175em;
}

.dropdown-toggle.no-chevron:after {
	display: none !important;
}


// Dropdown icon color and spacing
// ==============================================================

.dropdown-divider {
    margin-inline: calc(var(--dropdown-padding-x) * -1);
}

.dropdown-menu-light-icons .dropdown-item:not(.disabled) > :is(i, svg) {
	color: $dropdown-icon-color;
}

.dropdown-item {
    position: relative;
    display: flex;
    align-items: center;
    font-weight: $dropdown-font-weight;
    font-size: $dropdown-font-size;
    gap:  cssmax(8px, calc(var(--dropdown-item-padding-x) * 0.75));

	&.disabled {
		cursor: default;
	}

	&:not(.disabled) {
        > :is(i, svg) {
			color: $dropdown-link-color;
		}

		.dropdown-group.show > & > :is(i, svg),
        &:hover > :is(i, svg) {
			color: $dropdown-link-hover-color;
		}

        &:active > :is(i, svg),
        &:focus > :is(i, svg) {
			color: $dropdown-link-active-color;
		}
	}
}


// Dropdown Classic
// ==============================================================

.dropdown-menu-classic {
    // A dropdown menu with no x-padding and larger item x-padding,
    // also no item radius.
    --dropdown-item-border-radius: 0;
    --dropdown-padding-x: 0;
    --dropdown-padding-y: var(--dropdown-border-radius);
    --dropdown-item-padding-x: 1rem;
}


// Flex Dropdown item (for items with keyboard shortcuts)
// ==============================================================

.dropdown-menu-flex .dropdown-item {
	display: flex;
	align-items: center;

	> span {
		flex-grow: 1;
	}

	> em {
		font-style: normal;
		text-align: end;
		padding-inline-start: 2rem;
		margin-inline-start: auto;
		font-size: 90%;
		opacity: 0.8;
	}
}


// Animate dropdown menus in navbars
// ==============================================================

@mixin sliding-dropdown-menu() {
    opacity: 0;
    display: block;
    visibility: hidden;
    transform: translateY(var(--y1, -16px));
    transition: transform 0.2s ease, opacity 0.275s ease-out;
    will-change: transform;

    &.show {
        visibility: visible;
        transform: translateY(var(--y2, 0));
        opacity: 1;
    }
}

.navbar.navbar-slide .dropdown-menu,
.dropdown-menu-slide {
	@include sliding-dropdown-menu();
}


// Dropdowns with check icons
// ==============================================================

.dropdown-menu-check {
    .dropdown-item {
        padding-inline-end: 30px;
    }

    .dropdown-item.checked {
        font-weight: $font-weight-medium;
    }

    .dropdown-item.checked:after {
        position: absolute;
        inset-inline-end: 8px;
        display: inline-block;
        @include fontawesome("\f00c"); // check
        color: var(--success);
        text-align: start;
        line-height: $line-height-base;
    }
}


// Dropdown container
// (Disable all events within this container when a dropdown is visible)
// ==============================================================

.dropdown-container.active .btn {
    pointer-events: none;
    user-select: none;
}